<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vuex.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/elementui.css" />
		<script src="../js/elementui.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="app">

			ToDo:<el-input placeholder="请输入内容" v-model="input" prefix-icon="el-icon-search" @keyup.enter.native='add'>

			</el-input>
			<router-link to="/all">
				<el-link type="primary">所有事项</el-link>
			</router-link>
			<router-link to="/todo">
				<el-link type="warning">未完成事项</el-link>
			</router-link>
			<router-link to="/complete">
				<el-link type="success">已完成事项</el-link>
			</router-link>
			<router-view>
				<todo></todo>
				<all :parentlist='list'></all>
				<complete></complete>
			</router-view>

		</div>
		<template id='all'>
			<div>
				<ul>
					<!-- <li v-for="item in parentlist">{{item.text}}</li> -->
					{{parentlist}}
				</ul>
			</div>
		</template>

		<template id='todo'>
			<div>
				<h1>todo</h1>
			</div>
		</template>
		<template id='complete'>
			<div>
				<h1>complete</h1>
			</div>
		</template>
		<script type="text/javascript">
			var todo = {
				template: '#todo',
				data() {
					return {
						
					}
				},
				
			}
			var all = {
				template: '#all',
				props:['parentlist'],
			}
			var complete = {
				template: '#complete'
			}
			var router = new VueRouter({
				routes: [{
						path: '/all',
						component: all
					},
					{
						path: '/todo',
						component: todo
					}, {
						path: '/complete',
						component: complete
					}
				]
			})

			var Vue = new Vue({
				el: '#app',
				data: {
					name: '刘应杰',
					input: '',
					list: [{
						text: '123123'
					}, {
						text: 'sdfsdfdf'
					}, ]
				},
				methods: {
					add(event) {
						console.log(event.target.value)
					}
				},
				router,
				components: {
					'todo': todo,
					'all':all,
					'complete':complete
				}
			})
		</script>
	</body>
</html>
